<template>
  <div class="defaultPage">
    <a-layout>
      <a-layout-header style="height: auto;">
        <!--<a-row>-->
          <!--<a-col :span="24" class="contentTitle">模板页</a-col>-->
        <!--</a-row>-->
        <div class="head404"></div>
      </a-layout-header>
      <a-layout-content>
        <img class="img404" src="../../assets/image/404.png" alt="">
          <!--<div class="txtbox">-->
            <p>对不起，您请求的页面不存在、或已被删除、或暂时不可用</p>
            <p class="paddingbox">请点击以下链接继续浏览网页</p>
            <p><a class="link" @click="goBack">返回上一页面</a></p>
            <p><a class="link" @click="toLogin">返回登录页</a></p>
          <!--</div>-->
        <div class="imgBack"></div>
        <!--<img src="../../assets/image/error_cloud.png" class="imgBack" />-->
      </a-layout-content>
      <!--<a-layout-footer></a-layout-footer>-->
    </a-layout>
  </div>
</template>

<script>

export default {
  data () {
    return {}
  },
  methods: {
    goBack () {
      this.$router.go(-1)
    },
    toLogin () {
      this.$router.push({
        path: '/'
      })
    }
  },
  mounted () {
  }
}
</script>
<style lang="less">
  .defaultPage {
    height: 100%;
    .ant-layout {
      height: 100%;
      background: linear-gradient(rgb(43, 130, 201), rgb(96, 165, 224));
      /*.defaultPage {*/
        .imgBack {
          background: url('../../assets/image/error_cloud.png') repeat-x scroll 0 0 transparent;
          height: 170px;
          position: absolute;
          bottom: 0;
          /*width: calc(100vw - 260px);*/
          width: 100%;
        }
        .img404 {
          display: block;
          margin: 0 auto;
          margin-top: 80px;
        }
        .paddingbox {
          padding-top:15px;
        }
        p {
          color:#eee;
          font-size:13px;
          width:390px;
          margin:5px 0;
          margin-left: 60px;
          line-height:18px;
          .link {
            cursor:pointer;
            color:#eee;
            text-decoration:none;
            &:hover { color:#FC9D1D; text-decoration:underline;}
          }
        }
      /*}*/
    }
  }
</style>
